<template>
    <div>
        <el-dialog :title="UserInfo.isAdd ? '添加管理员' : '编辑管理员'" center :visible.sync="UserInfo.isShow"
            :before-close="cancel">
            <el-form :model="userFrom" :rules="rules" ref="userRef">
                <el-form-item label="所属角色" prop="roleid" label-width="100px">
                    <el-select v-model="userFrom.roleid" placeholder="请选择活动区域">
                        <el-option :label="item.rolename" :value="item.id" v-for="item in $store.getters['role/getRole']"
                            :key="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="用户名称" prop="username" label-width="100px">
                    <el-input v-model="userFrom.username"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password" label-width="100px">
                    <el-input v-model="userFrom.password"></el-input>
                </el-form-item>
                <el-form-item label="状态" prop="status" label-width="100px">
                    <el-switch v-model="userFrom.status" active-color="#13ce66" inactive-color="#ff4949" :active-value="1"
                        :inactive-value="2">
                    </el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="add">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { useradd, userinfo, useredit } from '../../request/api'
import { mapActions } from 'vuex'
export default {
    props: ['UserInfo'],
    data() {
        return {
            userFrom: {
                roleid: "",//角色编号number
                username: "",//管理员名称string
                password: "",//密码string
                status: 1,//状态  1正常2禁用number
            },
            rules: {
                roleid: [
                    { required: true, message: '请选择活动区域', trigger: 'change' }
                ],
                username: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
        ...mapActions({
            getCount:'user/GetUserCount'
        }),
        // 点击取消隐藏弹框
        cancel() {
            this.$emit('cancel', false)
            this.reset()
        },
        // 清除弹框中的内容
        reset() {
            this.userFrom = {
                roleid: "",//角色编号number
                username: "",//管理员名称string
                password: "",//密码string
                status: 1,//状态  1正常2禁用number
            }
            // 重置校验规则
            this.$refs.userRef.resetFields()
        },
        // 数据回显
        async lookup(uid) {
            let res = await userinfo({ uid })
            this.userFrom = res.list
            // 密码为空是不修改密码
            this.userFrom.password = ''
            this.userFrom.uid = uid
        },
        add() {
            this.$refs.userRef.validate((val) => {
                if (val) {
                    if (this.UserInfo.isAdd) {//添加管理员
                        useradd(this.userFrom)
                            .then(res => {
                                if (res.code == 200) {
                                    this.cancel()
                                    this.$message.success(res.msg)
                                    this.$store.dispatch('user/GetUserInfo',res.list)
                                    this.getCount()//重新调用总页数
                                } else {
                                    this.$message.error(res.msg)
                                }
                            })
                    } else {//编辑管理员
                        useredit(this.userFrom)
                            .then(res => {
                                if (res.code == 200) {
                                    this.$store.dispatch('user/GetUserInfo', res.list)
                                    this.cancel()
                                    this.$message.success(res.msg)
                                } else {
                                    this.$message.error(res.msg)
                                }
                            })
                    }
                }
            })
        }
    },
    mounted() {
        // 减少对服务器发起请求
        if (this.$store.getters['role/getRole'].length == 0) {
            this.$store.dispatch('role/GetRoleInfo')
        }

    },
    computed: {
    },
    components: {}
}
</script>
<style scoped></style>